<template>
  <el-card class="table-card">
    <template #header>
      <div class="card-header">
        <span class="header-title">执行日志列表</span>
        <el-button type="primary" :icon="Refresh" circle @click="refreshData" />
      </div>
    </template>
    
    <el-table
      v-loading="loading"
      :data="logData"
      border
      style="width: 100%"
    >
      <el-table-column prop="task_name" label="任务名称" width="180" :show-overflow-tooltip="true" />
      <el-table-column prop="batch_no" label="批次号" width="150" :show-overflow-tooltip="true" />
      <el-table-column prop="status" label="执行状态" width="120" align="center">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="message" label="执行信息" min-width="220" :show-overflow-tooltip="true" />
      <el-table-column label="创建时间" width="180">
        <template #default="scope">
          {{ formatDateTime(scope.row.created_at) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template #default="scope">
          <el-button-group>
            <el-button type="primary" size="small" @click="viewDetail(scope.row)">详情</el-button>
            <el-tooltip content="下载对比结果" placement="top" effect="dark">
              <el-button type="success" size="small" @click="exportData(scope.row)">下载</el-button>
            </el-tooltip>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, toRefs, watch } from 'vue';
import { Refresh } from '@element-plus/icons-vue';
import { getStatusText, getStatusType, formatDateTime } from './utils';

// 定义组件接收的属性
const props = defineProps({
  logData: {
    type: Array,
    required: true
  },
  loading: {
    type: Boolean,
    default: false
  },
  pagination: {
    type: Object,
    required: true
  }
});

// 解构分页信息
const { pagination } = toRefs(props);
const currentPage = ref(pagination.value.currentPage);
const pageSize = ref(pagination.value.pageSize);
const total = ref(pagination.value.total);

// 监听父组件传递的分页信息变化
watch(() => props.pagination, (newVal) => {
  currentPage.value = newVal.currentPage;
  pageSize.value = newVal.pageSize;
  total.value = newVal.total;
}, { deep: true });

// 定义组件触发的事件
const emit = defineEmits(['refresh', 'size-change', 'current-change', 'view-detail', 'export']);

// 刷新数据
const refreshData = () => {
  emit('refresh');
};

// 处理分页大小变化
const handleSizeChange = (size: number) => {
  emit('size-change', size);
};

// 处理页码变化
const handleCurrentChange = (page: number) => {
  emit('current-change', page);
};

// 查看详情
const viewDetail = (row: any) => {
  emit('view-detail', row);
};

// 导出数据
const exportData = (row: any) => {
  emit('export', row);
};
</script>

<style lang="scss" scoped>
.table-card {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .header-title {
      font-size: 16px;
      font-weight: 500;
    }
  }
  
  .pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
  }
}
</style>